<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>推荐商品 - 雁农冷链平台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/sa.css">
</head>
<body>
	<div id="app">
		<!-- 页面标题 -->
		<div class="card">
			<div class="card-header">
				<h2><i class="icon-star"></i> 推荐商品</h2>
				<p>为衡阳市民精选优质本地特色商品</p>
			</div>
		</div>

		<!-- 筛选条件 -->
		<div class="card">
			<div class="card-body">
				<div class="search-form">
					<div class="form-item">
						<div class="form-group">
							<label>商品分类</label>
							<select name="category" v-model="searchForm.category">
								<option value="">全部分类</option>
								<option value="local-specialty">衡阳特产</option>
								<option value="vegetables">新鲜蔬菜</option>
								<option value="grains">粮油副食</option>
								<option value="poultry-eggs">禽蛋类</option>
								<option value="traditional-food">传统食品</option>
							</select>
						</div>
						<div class="form-group">
							<label>价格区间</label>
							<select name="priceRange" v-model="searchForm.priceRange">
								<option value="">不限</option>
								<option value="0-50">0-50元</option>
								<option value="50-100">50-100元</option>
								<option value="100-200">100-200元</option>
								<option value="200+">200元以上</option>
							</select>
						</div>
						<div class="form-group">
							<button class="btn btn-primary" @click="searchProducts">搜索</button>
							<button class="btn btn-secondary" @click="resetSearch">重置</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 推荐商品列表 -->
		<div class="card">
			<div class="card-body">
				<div class="product-grid">
					<div class="product-item" v-for="product in productList" :key="product.id">
						<div class="card product-card">
							<div class="card-body">
								<div class="product-image">
									<img :src="product.image" :alt="product.name">
									<div class="product-badge" v-if="product.isRecommend">推荐</div>
								</div>
								<h3 class="product-name">{{ product.name }}</h3>
								<p class="product-desc">{{ product.description }}</p>
								<div class="product-info">
									<span class="product-price">¥{{ product.price }}</span>
									<span class="product-unit">/{{ product.unit }}</span>
									<span class="product-stock">库存: {{ product.stock }}</span>
								</div>
								<div class="product-actions">
									<button class="btn btn-sm" @click="viewDetail(product)">查看详情</button>
									<button class="btn btn-sm btn-primary" @click="addToCart(product)">加入购物车</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 分页 -->
				<div class="pagination" style="text-align: center; margin-top: 20px;">
					<a href="javascript:;" class="page-btn" @click="prevPage">上一页</a>
					<span class="page-current">{{ currentPage }}</span>
					<a href="javascript:;" class="page-btn" @click="nextPage">下一页</a>
				</div>
			</div>
		</div>
	</div>

	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				searchForm: {
					category: '',
					priceRange: ''
				},
				productList: [
					{
					id: 1,
					name: '衡阳湘莲',
					description: '衡阳特产优质湘莲，颗粒饱满，口感香甜软糯',
					price: 28.8,
					unit: '斤',
					stock: 500,
					image: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01eb66981cebfbe57b.jpg',
					isRecommend: true
				},
				{
					id: 2,
					name: '衡阳大白菜',
					description: '衡阳本地种植大白菜，新鲜脆嫩，绿色无公害',
					price: 6.5,
					unit: '斤',
					stock: 200,
					image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t01352ad65a8dd386d6.jpg',
					isRecommend: false
				},
				{
					id: 3,
					name: '衡阳黄花菜',
					description: '衡阳祁东黄花菜，国家地理标志产品，营养丰富',
					price: 45.0,
					unit: '斤',
					stock: 100,
					image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0495ffd7b13e1d41de.jpg',
					isRecommend: true
				},
				{
					id: 4,
					name: '衡阳酥薄月饼',
					description: '衡阳传统特色糕点，酥脆香甜，老少皆宜',
					price: 18.8,
					unit: '盒',
					stock: 150,
					image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0105378254bf718aa6.jpg',
					isRecommend: false
				},
				{
					id: 5,
					name: '衡阳土鸡蛋',
					description: '衡阳农家散养土鸡蛋，营养价值高，蛋黄金黄',
					price: 32.0,
					unit: '30枚装',
					stock: 80,
					image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t04bd174b4fddbb245e.jpg',
					isRecommend: true
				},
				{
					id: 6,
					name: '衡阳茶油',
					description: '衡阳山茶油，纯天然压榨，营养丰富香味浓郁',
					price: 88.0,
					unit: '500ml',
					stock: 60,
					image: 'https://p0.ssl.qhimgs1.com/sdr/400__/t01f3555127973c7414.jpg',
					isRecommend: true
				}
				],
				currentPage: 1,
				totalPages: 5
			},
			methods: {
				searchProducts() {
					// 搜索商品逻辑
					console.log('搜索条件:', this.searchForm);
					alert('搜索功能开发中...');
				},
				resetSearch() {
					this.searchForm = {
						category: '',
						priceRange: ''
					};
				},
				viewDetail(product) {
					alert('商品详情：' + product.name + '\n价格：¥' + product.price + '/' + product.unit);
				},
				addToCart(product) {
					alert('已添加到购物车：' + product.name);
				},
				prevPage() {
					if (this.currentPage > 1) {
						this.currentPage--;
					}
				},
				nextPage() {
					if (this.currentPage < this.totalPages) {
						this.currentPage++;
					}
				}
			}
		});
	</script>

	<style>
		/* 基础样式 */
		.card {
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			margin-bottom: 20px;
		}
		.card-header {
			padding: 20px;
			border-bottom: 1px solid #f0f0f0;
		}
		.card-body {
			padding: 20px;
		}
		.card-header h2 {
			margin: 0;
			color: #333;
			font-size: 24px;
		}
		.card-header p {
			margin: 5px 0 0 0;
			color: #666;
		}
		
		/* 表单样式 */
		.search-form .form-item {
			display: flex;
			gap: 20px;
			align-items: center;
			flex-wrap: wrap;
		}
		.form-group {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
		.form-group label {
			font-weight: bold;
			color: #333;
		}
		.form-group select {
			padding: 8px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			min-width: 120px;
		}
		
		/* 按钮样式 */
		.btn {
			padding: 8px 16px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s;
		}
		.btn-primary {
			background: #1890ff;
			color: white;
		}
		.btn-primary:hover {
			background: #40a9ff;
		}
		.btn-secondary {
			background: #f5f5f5;
			color: #666;
		}
		.btn-secondary:hover {
			background: #e6e6e6;
		}
		.btn-sm {
			padding: 6px 12px;
			font-size: 12px;
		}
		
		/* 商品网格 */
		.product-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 20px;
		}
		.product-card {
			transition: all 0.3s;
			border: 1px solid #f0f0f0;
		}
		.product-card:hover {
			box-shadow: 0 4px 16px rgba(0,0,0,0.15);
			transform: translateY(-2px);
		}
		.product-image {
			position: relative;
			height: 200px;
			overflow: hidden;
			border-radius: 4px;
			margin-bottom: 10px;
		}
		.product-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.product-badge {
			position: absolute;
			top: 10px;
			right: 10px;
			background: #ff5722;
			color: white;
			padding: 2px 8px;
			border-radius: 12px;
			font-size: 12px;
		}
		.product-name {
			font-size: 16px;
			font-weight: bold;
			margin: 10px 0 5px 0;
			color: #333;
		}
		.product-desc {
			color: #666;
			font-size: 14px;
			margin-bottom: 10px;
			line-height: 1.4;
		}
		.product-info {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
		}
		.product-price {
			color: #ff5722;
			font-size: 18px;
			font-weight: bold;
			margin-right: 5px;
		}
		.product-unit {
			color: #999;
			margin-right: 15px;
		}
		.product-stock {
			color: #666;
			font-size: 12px;
		}
		.product-actions {
			display: flex;
			gap: 10px;
		}
		.product-actions .btn {
			flex: 1;
		}
		
		/* 分页样式 */
		.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
		}
		.page-btn {
			padding: 8px 16px;
			background: #f5f5f5;
			color: #666;
			text-decoration: none;
			border-radius: 4px;
			transition: all 0.3s;
		}
		.page-btn:hover {
			background: #1890ff;
			color: white;
		}
		.page-current {
			padding: 8px 16px;
			background: #1890ff;
			color: white;
			border-radius: 4px;
		}
	</style>
</body>
</html>